<script setup lang="ts">
  import SchemaSearchPage from '@/components/schema-search-page/index.vue'
  import type { DoSearch, SearchFieldTypes } from '@/components/schema-search-page/interface'
  import { CategoryStatusEnum, CategoryTypeEnum } from '@/shared'
  import type { CategoryEntity } from '@/shared/entity/category'
  import {
    CategoryStatusOptions,
    CategoryTypeOptions,
    SetmealStatusOptions
  } from '@/shared/options'
  import { getUri } from '@/utils'
  import { DoDelete, DoGet, DoPost } from '@/utils/http'
  import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue'

  const tableRef = useTemplateRef('tableRef')

  const typeOptions = reactive<{ label: string; value: number }[]>([])

  const Refresh = () => {
    tableRef.value?.Refresh()
  }

  const searchFields = computed(
    () =>
      [
        {
          type: 'Input',
          fieldName: 'name',
          fieldLabel: '套餐名称',
          props: {
            style: 'width: 208px'
          }
        },
        {
          type: 'Select',
          fieldName: 'categoryId',
          fieldLabel: '套餐分类',
          props: {
            options: typeOptions,
            style: 'width: 208px'
          }
        },
        {
          type: 'Select',
          fieldName: 'status',
          fieldLabel: '售卖状态',
          props: {
            options: SetmealStatusOptions,
            style: 'width: 208px'
          }
        }
      ] as SearchFieldTypes
  )

  const columns = [
    {
      title: '套餐名称',
      dataIndex: 'name'
    },
    {
      title: '套餐图片',
      dataIndex: 'image'
    },
    {
      title: '套餐分类',
      dataIndex: 'type'
    },
    {
      title: '套餐价格',
      dataIndex: 'price'
    },
    {
      title: '售卖状态',
      dataIndex: 'status'
    },
    {
      title: '最后操作时间',
      dataIndex: 'updateTime'
    }
  ]

  const doSearch: DoSearch = async (page: number, size: number, conditions?: any) => {
    const resp = await DoGet(
      getUri('/setmeal/page', {
        page,
        size,
        ...conditions
      })
    )

    return {
      data: resp.data,
      total: resp.total || 0
    }
  }
  const visible = ref(false)

  const initialValues = ref<Partial<CategoryEntity>>({})

  const type = ref<CategoryTypeEnum>(CategoryTypeEnum.Dish)

  const handlerDelete = async (record: CategoryEntity) => {
    await DoDelete(
      getUri(`/category`, {
        id: record.id
      })
    )
    Refresh()
  }

  const handlerChangeStatus = async (status: CategoryStatusEnum, id: number) => {
    await DoPost(
      getUri(`/category/status/${status}`, {
        id
      })
    )
    Refresh()
  }

  const handlerCategoryList = async () => {
    const resp = await DoGet<CategoryEntity[]>(
      getUri(`/category/list`, {
        type: CategoryTypeEnum.Setmeal
      })
    )

    const options = resp.data?.map(item => {
      return {
        label: item.name,
        value: item.id
      }
    })

    typeOptions.push(...(options || []))
  }

  onMounted(() => {
    handlerCategoryList()
  })
</script>

<template>
  <SchemaSearchPage
    :search-fields="searchFields"
    :columns="columns"
    :do-search="doSearch"
    ref="tableRef"
  >
    <template #type="{ record }">
      {{ typeOptions.find(item => item.value === record.categoryId)?.label || '暂无' }}
    </template>
    <template #default>
      <a-space>
        <a-button
          type="primary"
          @click="
            () => {
              visible = true
              type = CategoryTypeEnum.Setmeal
              initialValues = {}
            }
          "
        >
          新增套餐分类
        </a-button>
      </a-space>
    </template>
  </SchemaSearchPage>
</template>
